<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Merchant</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
<link rel="stylesheet" href="css/test.css">
</head>
<body>
	<section id="maincontainer" class="container clearfix">
	<h1 class="heading1">
		Merchant <span>List</span>
	</h1>
	<section id="options" class="clearfix">
	<ul id="filters" class="option-set clearfix">
		<c:forEach items="${sessionScope.typeList}" var="dishtype">
			<c:choose>
				<c:when test="${dishtype.pId==sessionScope.defaultType}">
					<li><a href="MerchantListServlet?type=${dishtype.pId}" class="selected">${dishtype.pname}</a></li>
				</c:when>
				<c:otherwise>
					<li><a href="MerchantListServlet?type=${dishtype.pId}">${dishtype.pname}</a></li>
				</c:otherwise>
			</c:choose>
		</c:forEach>
	</ul>
	</section>

	<div id="recipecontainer" class="clearfix recipecolumn3 recipesortable">
		<ul>
			<c:forEach items="${merchants}" var="merchant">
				<li class="element">
				<a href="DishListServlet?mId=${merchant.mId}&type=000" class="fancyboxpopup"><img src="ImageLoader?path=${merchant.imageUrl}" alt="" /></a>
					<div class="recipedetails">
						<a href="DishListServlet?mId=${merchant.mId}&type=000" class="title">${merchant.mName}</a>
						<p>${merchant.address}</p>
						<a class="fr" href="DishListServlet?mId=${merchant.mId}&type=000">Read  More >></a>
					</div></li>
			</c:forEach>
		</ul>
	</section>



	<!-- 	<div align="right"> -->
	<!-- 		<form id="selectDishTypeForm" action="MerchantListServlet" -->
	<!-- 			method="post"> -->
	<!-- 			<select name="type" -->
	<!-- 				onchange="document.getElementById('selectDishTypeForm').submit()"> -->
	<%-- 				<c:forEach items="${sessionScope.typeList}" var="dishtype"> --%>
	<%-- 					<c:choose> --%>
	<%-- 						<c:when test="${dishtype.pId==sessionScope.defaultType}"> --%>
	<%-- 							<option value="${dishtype.pId}" selected="selected">${dishtype.pname}</option> --%>
	<%-- 						</c:when> --%>
	<%-- 						<c:otherwise> --%>
	<%-- 							<option value="${dishtype.pId}">${dishtype.pname}</option> --%>
	<%-- 						</c:otherwise> --%>
	<%-- 					</c:choose> --%>
	<%-- 				</c:forEach> --%>
	<!-- 			</select> <input type="submit" value="Query" hidden></input> -->
	<!-- 		</form> -->
	<!-- 	</div> -->

	<!-- 	<div align="center"> -->
	<!-- 		<table> -->
	<!-- 			<tr> -->
	<!-- 				<td>ID</td> -->
	<!-- 				<td>Image</td> -->
	<!-- 				<td>Name</td> -->
	<!-- 				<td>address</td> -->
	<!-- 				<td>Operation</td> -->
	<!-- 			</tr> -->

	<%-- 			<c:forEach items="${merchants}" var="merchant"> --%>
	<!-- 				<tr> -->
	<%-- 					<td>${merchant.mId}</td> --%>
	<%-- 					<td><img src="ImageLoader?path=${merchant.imageUrl}" --%>
	<!-- 						height="80" width="80"></img></td> -->
	<%-- 					<td>${merchant.mName}</td> --%>
	<%-- 					<td>${merchant.address}</td> --%>
	<%-- 					<td><a href="DishListServlet?mId=${merchant.mId}&type=000">Link</a></td> --%>
	<!-- 				</tr> -->
	<%-- 			</c:forEach> --%>
	<!-- 		</table> -->
	<!-- 	</div> -->






</body>
</html>